<template>
  <el-dialog :visible="visible" @close="hide" v-bind="$attrs">
    <slot></slot>
    <el-row justify="center" type="flex" v-if="showFooter">
      <el-button @click="hide">{{ cancelText }}</el-button>
      <el-button type="primary" :disabled="confirmLoading" :loading="confirmLoading" @click="confirm">{{
        confirmText
      }}</el-button>
    </el-row>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
      confirmLoading: false,
    };
  },
  props: {
    cancelText: {
      type: String,
      default: '取 消',
    },
    confirmText: {
      type: String,
      default: '确 定',
    },
    showFooter: {
      type: Boolean,
      default: true,
    },
  },
  methods: {
    show() {
      this.visible = true;
    },
    hide() {
      this.visible = false;
    },
    confirm() {
      this.$emit('confirm');
    },
  },
};
</script>
